<template>
   <div class="title">插槽(Slot)</div>
  <div class="inner">
    <piniaInput></piniaInput>
    <piniaShow></piniaShow>
    <div>
    <span>{{name}}</span><span>{{ count }}</span>
    </div>
    <div>  
    <button @click="countClick()">count++</button>
    </div>
    <div>  
    count*2 = <span>{{ doubleCount }}</span>
    </div>
  </div>
</template>
<script setup>
import piniaShow from '../../components/communicationParties/piniaShow.vue';
import piniaInput from '../../components/communicationParties/piniaInput.vue';
import {useUserStore} from '@/store/user.js'
import { storeToRefs } from 'pinia';
const store=useUserStore();
const {name,count,doubleCount}=storeToRefs(store);
function countClick(){
    store.getCount();
}
</script>

<style>

.unitBar{
    margin-bottom: 20px;
    }
span{
  margin-right: 20px;
  color: #0076ee;
}
</style>